<template>
  <!-- <div>销售日志</div> -->

  <div class="shop">
      <div class="top">
      <el-button size='small'
        type='primary'
        @click="exportSaleDaily">导出数据</el-button>

      <el-button class='search'
        size='small'
        type='primary'
        @click="searchDailyData">搜索</el-button>
      <el-input class="search input"
        size='small'
        v-model="shop_id"
        placeholder="输入id查询"
        clearable></el-input>
      <el-input class="search input"
        size='small'
        v-model="title"
        placeholder="输入商品名称查询"
        clearable></el-input>

      <el-select style="width:130px;"
        size='small'
        v-model="status"
        filterable
        class="search"
        placeholder="商品状态">
        <el-option label="全部"
          :value="0">全部</el-option>
        <el-option label="上架中"
          :value="1"></el-option>
        <el-option label="未上架"
          :value="2"></el-option>
      </el-select>
    </div>

     <el-table :data="tableData"
      style="width:100%"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label ='商品ID' prop='ID'></el-table-column>
      <el-table-column label='商品名称' prop='title'></el-table-column>
      <el-table-column label='商品图片'
        width='180'>
        <template slot-scope="scope">
          <div class="img">
            <img :key="scope.row.ID"
              style="width:100px;"
              :src="scope.row.pic_url ? scope.row.pic_url : errorImg"
              alt />
          </div>
          <p class="more"
            @click="lookMoreDaily">（更多）</p>
        </template>
      </el-table-column>

      <el-table-column label='下单用户' prop='username'></el-table-column>
      <el-table-column label='创建时间' prop='create_at'></el-table-column>
      <el-table-column label='供货价'>
         <template slot-scope="scope">
            ¥{{scope.row.gongprice}}
         </template>
      </el-table-column>
      <el-table-column label='销售价'>
         <template slot-scope="scope">
           ¥{{scope.row.price}}
         </template>
      </el-table-column>
      <el-table-column label='红包抵扣'>
         <template slot-scope="scope">
           ¥{{scope.row.discount}}
         </template>
      </el-table-column>
      <el-table-column label='加润比（总）'>
         <template slot-scope="scope">
            {{scope.row.percent}}%
        </template>     
      </el-table-column>
      <el-table-column label='预估收益（总）'>
          <template slot-scope="scope">
            ¥{{scope.row.profit}}
          </template>
      </el-table-column>
      <el-table-column label='商品SKU' prop='sku'></el-table-column>
      <el-table-column label='订单状态'>
         <template slot-scope="scope">
           <p v-if='scope.row.status == 1'>已付款</p>
           <p v-if='scope.row.status == 2'>已发货</p>
           <p v-if='scope.row.status == 3'>已收获</p>
           <p v-if='scope.row.status == 4'>已完成</p>
           <p v-if='scope.row.status == 5'>已关闭</p>
         </template>
      </el-table-column>
      <el-table-column label='操作' fixed='right'>
        <template slot-scope="scope">
          <el-button type='primary' size='mini' @click="watchDailyDetail(scope.row.ID)">查看</el-button>
        </template>
      </el-table-column>
     </el-table>

     <el-col :span="24">
      <div class="pagination">
        <el-pagination background
          @current-change="pageChange"
          :current-page="page"
          :page-size="size"
          layout="total, prev, pager, next, jumper"
          :total="total"></el-pagination>
      </div>
    </el-col>

  </div>
</template>

<script>
import errorImg from "@/assets/images/error_img.png";
export default {
  data(){
    return{
        shop_id:'',
        status:'',
        title:'',
        page:1,
        size:20,
        total:0,
        errorImg,
        tableData:[{ID:'001002003',title:'adidas 三叶草 男子经典鞋BD7676',pic_url:'',username:'18825253636',create_at:'2019-07-25 15:00',gongprice:'99.01',price:'199.01',discount:'100.0',percent:'20',profit:'19.8',sku:'XL/黑色',status:1},{ID:'001002003',title:'adidas 三叶草 男子经典鞋BD7676',pic_url:'',username:'18825253636',create_at:'2019-07-25 15:00',gongprice:'99.01',price:'199.01',discount:'100.0',percent:'20',profit:'19.8',sku:'XL/黑色',status:2},{ID:'001002003',title:'adidas 三叶草 男子经典鞋BD7676',pic_url:'',username:'18825253636',create_at:'2019-07-25 15:00',gongprice:'99.01',price:'199.01',discount:'100.0',percent:'20',profit:'19.8',sku:'XL/黑色',status:3},{ID:'001002003',title:'adidas 三叶草 男子经典鞋BD7676',pic_url:'',username:'18825253636',create_at:'2019-07-25 15:00',gongprice:'99.01',price:'199.01',discount:'100.0',percent:'20',profit:'19.8',sku:'XL/黑色',status:4},{ID:'001002003',title:'adidas 三叶草 男子经典鞋BD7676',pic_url:'',username:'18825253636',create_at:'2019-07-25 15:00',gongprice:'99.01',price:'199.01',discount:'100.0',percent:'20',profit:'19.8',sku:'XL/黑色',status:5}]
    }
  },
  methods:{
    //导出日志数据
    exportSaleDaily(){
       //  this.form.isExport = 1
      // this.getshopIncomesData()
    },
    //搜索
    searchDailyData(){

    },
    pageChange (page) {
      this.page = page;
      //申请更多销售日志数据

    },
    //查看更多图片
    lookMoreDaily(){
      console.log('查看更多商品图片')
    },
    //查看销售日志详情
    watchDailyDetail(id){
      console.log(id)
    },
    tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
  }
}
</script>

<style lang="scss" scoped>
.shop{
  padding: 20px;
  .top {
    margin-bottom: 20px;
    .search {
      float: right;
      margin-left: 12px;
    }
    .input {
      width: 150px;
    }
  }
  .img {
    float: left;
  }
  .more {
    width: 60px;
    float: right;
    line-height: 100px;
    color: #f4222d;
    cursor: pointer;
  }
  .pagination {
    float: right;
    margin-top: 12px;
  }
}
</style>